<template>
  <div class="app-container">
    <el-row :gutter="20" class="app-container-main" type="flex">
      <!--部门数据-->
      <el-col :span="5" :xs="24" class="app-container-main-tree mr-12">
        <BaseTree
          ref="BaseTree"
          :title="'账单日期'"
          :getModuleTreeData="getModuleTreeData"
          :treeProps="defaultProps"
          :nodeKey="'id'"
          :nodeName="'spendingTime'"
          @onModuleNodeClick="onModuleNodeClick"
        ></BaseTree>
      </el-col>
      <!--用户数据-->
      <el-col :span="19" :xs="24" class="app-container-main-col flex-1">
        <filter-config-box
          :options="filterOptions"
          v-model="queryParams"
          @search="handleQuery"
          @onReset="resetQuery"
        />
        <el-card class="table-card">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="() => handleAdd()"
                v-if="spendId"
                v-hasPermi="['system:user:add']"
                >新增</el-button
              >
            </el-col>
            <right-toolbar @queryTable="getBillDetailList"></right-toolbar>
          </el-row>

          <el-table v-loading="loading" :data="billDetailList">
            <el-table-column label="序号" type="index" align="center">
              <template slot-scope="scope">
                <span>{{
                  (queryParams.pageNum - 1) * queryParams.pageSize +
                  scope.$index +
                  1
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="账单名称" prop="name" align="center">
            </el-table-column>
            <el-table-column label="账单金额" align="center" prop="price">
              <template #default="{ row }">
                {{ "￥" + row.price + "元" }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="160"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope" v-if="scope.row.userId !== 1">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['system:user:edit']"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['system:user:remove']"
                  >删除</el-button
                >
              </template>
            </el-table-column>
            <div slot="empty" class="emptyBg">
              <el-empty :image-size="200"></el-empty>
            </div>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getBillDetailList"
          />
        </el-card>
      </el-col>
    </el-row>
    <!-- 进行添加和修改 -->
    <Dialog
      ref="Dialog"
      :options="options"
      :rules="rules"
      :visible="dialog.visible"
      :title="dialog.title"
      :formData="dialog.formData"
      :cancel="cancel"
      :submit="submit"
    />
  </div>
</template>

<script>
import {
  listTree,
  billDetailList,
  addBillDetail,
  updateBillDetail,
  deleteBillDetail,
} from "@/api/bill/billList.js";
import dayjs from "dayjs";

export default {
  name: "billDetail",
  data() {
    return {
      permModuleList: [],
      billDetailList: [],
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      defaultProps: {
        label: "spendingTime",
      },
      dialog: {
        visible: false,
        title: undefined,
        formData: undefined,
      },
      spendId: undefined,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        spendId: undefined,
      },
    };
  },
  created() {
    this.getList();
    this.getBillDetailList();
  },
  methods: {
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm("是否确认删除该条数据？")
        .then(function () {
          return deleteBillDetail(row.id);
        })
        .then(() => {
          this.getBillDetailList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 取消弹窗 */
    cancel(success) {
      this.dialog.visible = false;
      this.dialog.formData = {};
      if (success) {
        this.getBillDetailList();
      }
    },
    /** 确认弹窗 */
    submit(val) {
      if (val.id) {
        updateBillDetail(val).then((response) => {
          if (response.code === 200) {
            this.cancel(true);
            this.$modal.msgSuccess("修改成功");
          }
        });
      } else {
        val.spendId = this.spendId;
        addBillDetail(val).then((response) => {
          if (response.code === 200) {
            this.cancel(true);
            this.$modal.msgSuccess("新增成功");
          }
        });
      }
    },
    /** 新增 */
    handleAdd() {
      this.dialog.title = "添加账单明细";
      this.dialog.visible = true;
    },
    /** 修改 */
    handleUpdate(row) {
      this.dialog.formData = row;
      this.dialog.title = "修改账单明细";
      this.dialog.visible = true;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getBillDetailList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryParams");
      this.queryParams.spendId = this.spendId;
      this.queryParams.pageNum = 1;
      this.getBillDetailList();
    },
    /** 查询账单列表 */
    getList() {
      listTree().then((response) => {
        this.permModuleList = response.rows.map((item) => {
          item.label = dayjs(item.spendingTime).format("YYYY年MM月DD日");
          return { ...item, spendingTime: item.label };
        });
      });
    },
    /** 查询账单列表 */
    getBillDetailList() {
      this.loading = true;
      billDetailList(this.insertDateRange(this.queryParams)).then(
        (response) => {
          this.billDetailList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    onModuleNodeClick(data) {
      this.queryParams.spendId = data.id;
      this.spendId = data.id;
      this.getBillDetailList();
    },
  },
  computed: {
    getModuleTreeData() {
      let tempList = [
        {
          id: "",
          spendingTime: "全部",
        },
      ];
      this.$nextTick(() => {
        // 默认高亮显示，目前写死
        this.$refs.BaseTree.setCurrentKey("");
      });
      return tempList.concat(this.permModuleList);
    },
    filterOptions() {
      return [
        {
          prop: "name",
          label: "账单名称",
          labelWidth: "68px",
          attrs: {
            style: {
              width: "240px",
            },
          },
        },
      ];
    },
    options() {
      return [
        {
          prop: "name",
          label: "账单名称",
          attrs: {},
        },
        {
          tag: "number",
          prop: "price",
          label: "账单金额",
          value: 0,
          attrs: {
            precision: 2,
            min: 0,
          },
        },
      ];
    },
    rules() {
      return {
        name: {
          required: true,
          message: "请输入账单名称",
          trigger: "blur",
        },
        price: {
          required: true,
          message: "请输入账单金额",
          trigger: "blur",
        },
      };
    },
  },
};
</script>